<template>
	<div class="vedio">
		<div class="vedio-top">
			<img :src="singerinfo.bigImg" height="536" width="750" class="singerHB">
			<div class="nav-head"><router-link to="/musSin"><img src="../../../assets/icon-return45.png"></router-link><div class="title">{{singerinfo.singerName}}</div></div>
			<div class="singer-fans">
				<div class="fans"><span>{{singerinfo.fansCount}}万粉丝</span></div>
				<div class="gz-xz"><img src="../../../assets/guanzhu.png" class="im1"><img src="../../../assets/xunzhang.png" class="img2"></div>
			</div>
		</div>
		<div class="top-blank"></div>
		<div :class="['singer-detail-wraper',{'menu-fixed':isMenuFixed}]">
			<div class="menu-list">
				<div :class="['song',{'menu-active':songShow}]" @click="ShowSong"><span>歌曲</span><span>({{singerinfo.songsTotal}})</span></div>
				<div :class="['zhuan-ji',{'menu-active':zjShow}]" @click="ShowZj"><span>专辑</span><span>({{singerinfo.albumTotal}})</span></div>
				<div :class="['MV',{'menu-active':mvShow}]" @click="ShowMv"><span>MV</span><span>({{singerinfo.MVTotal}})</span></div>
				<div :class="['xiang-qing',{'menu-active':xqShow}]" @click="ShowXq"><span>详情</span></div>
				<div class="random-play">
					<span class="play-logo"><img src="../../../assets/icon-stop@2x45.png"></span>
					<span class="play-word">随机播放全部</span>
				</div>
			</div>
			<div class="song-list">
				<div class="song-info" v-for="(item,index) in songList" :key="index">
					<div class="song-zj" @click="PlaySong(item)">
						<p class="song">{{item.title}}</p>
						<p class="zj">{{item.album_title}}</p>
					</div>
					<div class="mv"><img src="../../../assets/mv-logo-singer.png"></div>
					<div class="share"><img src="../../../assets/icon-pull@2x32.png"></div>
				</div>
			</div>
		</div>
		<div  class="blank"></div>
		<!-- <musicPlayer></musicPlayer> -->
	</div>
</template>
<script>
import musicPlayer from '../../../components/music_player'
	export default{
		name:"singerDetaile",
		data(){
			return{
				songShow:true,
				zjShow:false,
				mvShow:false,
				xqShow:false,
				singerinfo:{},
				songList:[],
				isMenuFixed:false,
				showdiv:false,
				songid:''
			}
		},
		components:{
			musicPlayer
		},
		methods:{
			ShowSong(){
				this.songShow=true;
				this.zjShow=false;
				this.mvShow=false;
				this.xqShow=false;
			},
			ShowZj(){
				this.songShow=false;
				this.zjShow=true;
				this.mvShow=false;
				this.xqShow=false;
			},
			ShowMv(){
				this.songShow=false;
				this.zjShow=false;
				this.mvShow=true;
				this.xqShow=false;
			},
			ShowXq(){
				this.songShow=false;
				this.zjShow=false;
				this.mvShow=false;
				this.xqShow=true;
			},
			HandleScroll(){
				var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
				// console.log(scrollTop);
				var offsetTop = document.querySelector('.singer-detail-wraper').offsetTop-44;
				// console.log(offsetTop);
				if(this.isMenuFixed ==false){
					if(scrollTop>223){
						this.isMenuFixed = true;
					}
				}
				else{
					if(scrollTop<132){
						this.isMenuFixed = false;
						scrollTop = 223;
					}
				}
				// console.log(scrollTop);
				// console.log(offsetTop);
			},
			PlaySong(songinfo){
				var url = this.HOST;
				this.$store.dispatch('getSongInfo',songinfo);
				this.$axios.get(url,{
					params:{
						format:'json',
						method:'baidu.ting.song.play',
						songid:songinfo.song_id
					}
				})
				.then(res =>{
					this.$store.dispatch('getSongSrc',res.data.bitrate.file_link)
					console.log(res.data.bitrate.file_link)
				})
			}
		},
		created(){
			this.singerinfo = this.$store.getters.getSingerInfo;
			// console.log(this.singerinfo);
			this.singerinfo.fansCount = (parseInt(this.singerinfo.fansCount)/10000).toFixed(1);
			var url = this.HOST;
			this.$axios.get(url,{
				params:{
					format:'json',
					method:'baidu.ting.artist.getSongList',
					tinguid:this.singerinfo.tinguid,
					limits:10,
					use_cluster:1,
					order:2
				}
			})
			.then(res =>{
				this.songList = res.data.songlist;
				// console.log(this.songList);
			})

		},
		mounted(){
			window.addEventListener('scroll',this.HandleScroll)
		},
		destroyed () {
		  	window.removeEventListener('scroll', this.HandleScroll)
		},
	}
</script>
<style scoped lang="less">
.vedio{
	position: relative;
	z-index: 11;
}
.top-blank{
	width: 100%;
	height: 533 / 100rem;
}
.blank{
	width: 100%;
	height: 108 / 100rem;
	background-color: #fff;
}
.vedio-top{
	// background: url('../../../assets/banner4.png');
	background-size: 100%;
	width: 100%;
	height: 533/100rem;
	position: fixed;
	top: 0;
	left: 0;
	// z-index: -1;
	.singerHB{
		width: 100%;
		height: 100%;
	}
}
.nav-head{
	width: 100%;
	height: 88/100rem;
	overflow: hidden;
	position: absolute;
	top:0;
	left: 0;
}
.nav-head img{
	display: block;
	width: 27/100rem;
	height: 45/100rem;
	position: absolute;
	left: 20/100rem;
	top: 21.5/100rem;
}
.nav-head .title{
	width: 100%;
	height: 100%;
	text-align: center;
	font-size: 36/100rem;
	color: #fff;
	line-height: 88/100rem;
}
.singer-fans{
	width: 100%;
	position: absolute;
	bottom:0;
	left:0;
	font-size: 20/100rem;
	text-align: center;
	color:#fff;
	.gz-xz{
		margin-top: 21 / 100rem;
		margin-bottom: 15 / 100rem;
		img{
			width: 60 / 100rem;
		}
		.im1{
			margin-right: 46 / 100rem;
		}
	}
}
.singer-detail-wraper{
	position: relative;
	z-index: 11;
	background-color: #dbd7df;
}
.menu-list{
	width: 100%;
	background-color: #fff;
	font-size: 30 / 100rem;
	overflow: hidden;
	margin-bottom: 1px;
	position: relative;
	z-index: 11;
	div{
		float: left;
		margin-top: 32 / 100rem;
		padding-bottom: 5 / 100rem;
		border-bottom: 4px solid #fff;
	}
	.menu-active{	
		border-bottom: 4 / 100rem solid #c995f5;
	}
	.song{
		width: 175 / 100rem;
		text-indent: 20 / 100rem;
	}
	.zhuan-ji{
		width: 221 / 100rem;
		text-align: center;
	}
	.MV{
		width: 221 / 100rem;
		text-align: center;
	}
	.xiang-qing{
		width: 133 / 100rem;
		text-align: right;
		span{
			margin-right: 20 / 100rem;
		}
	}
	.random-play{
		margin: 0;
		padding: 0;
		border: none;
		width: 100%;
		height: 101 / 100rem;
		margin-left: 20 / 100rem;
		span{
			display: block;
			float: left;
		}
		.play-logo{
			width: 45 / 100rem;
			height: 100%;
			margin-right: 25 / 100rem;
			img{
				width: 45 / 100rem;
				margin-top: 33 / 100rem;
			}
		}
		.play-word{
			margin-top: 46 / 100rem;
		}
	}
}
.song-info{
	width: 100%;
	height: 100 / 100rem;
	background-color: #fff;
	margin-bottom: 1px;
	position: relative;
	overflow: hidden;
	z-index: 11;
	.song-zj{
		margin-top: 32 / 100rem;
		width: 554 / 100rem;
		margin-left: 20 / 100rem;
		.song{
			font-size: 24 / 100rem;
		}
		.zj{
			font-size: 18 / 100rem;
			margin-top: 10 / 100rem;
		}
	}
	.mv{
		width: 54 / 100rem;
		height: 26 / 100rem;
		position: absolute;
		top:42 / 100rem;
		right: 118 / 100rem;
		img{
			width: 54 / 100rem;
		}
	}
	.share{
		width: 33 / 100rem;
		height: 9 / 100rem;
		position: absolute;
		top:50 / 100rem;
		right: 20 / 100rem;
		img{
			width: 33 / 100rem;
			position: absolute;
		}
	}
}
.song-list{
	background-color: #dbd7df;
	position: relative;
	z-index: 11;
}
.menu-fixed{
	.menu-list{
		position: fixed;
		top: 88 / 100rem;
		left: 0;
		z-index: 999;
	}
}
</style>